<template>
  <div :class="Show?'pageImg':''"  class="page">
    <Nav :user = user></Nav>
    <div class="right">
      <Header :user = user></Header>
      <router-view @backgroundShow='Showbg'/>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Nav from '@/components/Nav.vue'
import Header from '@/components/Header.vue'
import { UserInfo } from '@/api/login';
export default {
  name: 'Home',
  data (){
    return {
      Show: '',
      user: ''
    }
  },
  components: {
    Nav,
    Header
  },
  methods:{
    Showbg (value) {
      this.Show = value
    },
    // 获取用户信息
    queryUserInfo(){
      UserInfo({
        token: sessionStorage.getItem('token')
      }).then((result)=>{
        if(result.data.user_type === '1'){
          this.user = 'school-admin'
        }
        if(result.data.user_type === '2'){
          this.user = 'user-shenbao'
        }
        if(result.data.user_type === '3'){
          this.user = 'user-zhuanjia'
        }
      })
    },
  },
  mounted(){
    this.queryUserInfo();
  }
}
</script>
<style lang="scss">
  @import '../common/font/font.css';
  .page{
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 1920px;
    height: 1080px;
    padding: 0;
    color: #2b3139;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    background-color: #f8f9fd;
  }
  .pageImg{
    background: url(../assets/images/bg.png) no-repeat;
    background-size: 100% 100%;
  }
  .right{
    width: calc(100% - 285px);
    height: 100%;
    float: left;
  }
</style>